<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // function eventLog(type) {
        //     console.log('event:' + type);
        // }
        // console.log(window);
        // console.log(window.location);
        // console.log(window.history);
        // console.log(window.navigator);
        window.onload = function() {
            // var myText = document.getElementById('myTest');
            // console.log(myText);
            // myText.style.color = 'red';

        };

        function myAdd(containerName, label, value) {
            const dl = document.querySelector(containerName);

            const pEL = document.createElement('p');
            pEL.innerText = label;

            const pELvalue = document.createElement('span');
            pELvalue.innerText = value;

            pEL.appendChild(pELvalue);
            dl.appendChild(pEL);
        }
    </script>
</head>


<body>
    <!-- <button onclick="eventLog('onclick')" onmouseover="eventLog('onmouseover')" onmouseout="eventLog('onmouseout')">测试</button>
    <input onfocus="eventLog('onfocus')" onblur="eventLog('onblur')"></input>
    <input oninput="eventLog('oninput')" onchange="eventLog('onchange')"></input>
    <div id="dl" class="container">content</div>
    <div id="dl2" class="container">content2</div> -->
    <button onclick="myAdd('#myTest', 'name:', 'zhangbing')">测试</button>

    <div id='myTest'></div>
    <script>
        myAdd('#myTest', 'name:', 'zhangbing');
        myAdd('#myTest', 'age:', '18');

        // const dl = document.querySelector('#myTest');

        // const pEL = document.createElement('p');
        // pEL.innerText = 'name:';

        // const pELvalue = document.createElement('span');
        // pELvalue.innerText = 'zhangbing';

        // pEL.appendChild(pELvalue);
        // dl.appendChild(pEL);
        // document.getElementById('dl');
        // const el = document.querySelector('#dl');
        // document.querySelector('.container');
        // a = document.querySelectorAll('.container');
        // el.style.color = 'red';
        // console.log(a);
        // for (let i of a) {
        //     i.style.color = 'blue';
        // }

        // //    转为数组
        // arr = [].slice.call(a);
        // arr.forEach(eli => {
        //     eli.style.color = 'blue';
        // });

        // console.log(arr);

        // const h1E1 = document.createElement('h1');
        // h1E1.innerText = 'he';
        // const h1Text = document.create('aa');
    </script>
</body>

</html>